<template>
  <div class="app">
    <el-input v-model="phone" placeholder="请输入手机"></el-input>
    <el-input v-model="paswordOne" placeholder="请输入密码"></el-input>
    <el-input v-model="paswordTwo" placeholder="请输入密码"></el-input>
    <el-row>
      <el-col :span="11">
        <div class="grid-content bg-purple-dark">
          <el-input maxlength="4" v-model="checkCode" placeholder="短信验证码"></el-input>
        </div>
      </el-col>
      <el-col :span="11" :offset="2">
        <div class="grid-content bg-purple-dark">
          <el-button
            type="primary"
            class="getyzm"
            :loading="codeFlg"
            @click="getVerify"
          >{{getVerText}}</el-button>
        </div>
      </el-col>
    </el-row>
    <el-button @click="reg" :loading="flg">注册</el-button>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      phone: "3305786030@qq.com",
      paswordOne: "zhou24272592",
      paswordTwo: "zhou24272592",
      checkCode: "ABCD",
      flg: false,
      getVerText: "获取验证码",
      second: 0, // 倒计时
      codeFlg: false
    };
  },
  methods: {
    ifVerify() {},
    reg() {
      if (this.phone.indexOf("@") != -1 || this.phone.indexOf(".") != -1) {
        if (!this.IFemail(this.phone)) return;
      } else {
        if (!this.IFphone(this.phone)) return;
      }
      if (!this.IFequal(this.paswordOne, this.paswordTwo)) return;
      if (!this.ISnull(this.checkCode)) return;
      if (this.checkCode.replace(/\s+/g, "").length != 4) {
        this.msgbox("请输入4位验证码", 2);
        return true;
      }
      this.flg = true;
      // this.$api.userAPI
      //   .ifVerify({
      //     code: this.checkCode,
      //     account: this.phone
      //   })
      //   .then(res => {
      //     this.msgbox(res.data.msg, 2);
      //     this.flg = false;
      //     if (res.data.state) {

      //     }
      //   });
      this.$api.userAPI
        .register({
          phoneno: this.phone,
          password: this.paswordTwo,
          checkCode: this.checkCode
        })
        .then(res => {
          this.flg = false;
          this.msgbox(res.data.msg, 2);
          if (res.data.state) {
            
          }
        })
        .catch(error => {
          this.flg = false;
          this.msgbox("注册失败", 3);
        });
    },
    getVerify() {
      //验证
      if (this.second > 0) {
        return true;
      }
      this.codeFlg = true;
      // 发送验证码
      this.$api.userAPI
        .sendEmail({
          phoneno: this.phone
        })
        .then(res => {
          if (res.data.code != 200) {
            this.codeFlg = false;
            this.msgbox(res.data.msg, 2);
            this.getVerText = "重新获取";
          } else {
            //返回 成功 进行倒计时
            this.$message({
              message: res.data.msg,
              type: "success"
            });
            this.second = 60;

            this.countdown();
          }
        });

      // 时间到恢复可点击
    },
    //倒计时
    countdown() {
      const chatTimer = setInterval(() => {
        this.second--;
        this.getVerText = "重新获取(" + this.second + ")";
        if (this.second == 0) {
          clearInterval(chatTimer);
          this.codeFlg = false;
          this.getVerText = "获取验证码";
        }
      }, 100);
    }
  },
  components: {}
};
</script>

<style scoped >
.getyzm {
  margin-top: 5px;
}
</style>
